FIREWORKS 4.0 - Clase 2

Por Milko A. García Torres

Enmascaramiento de imágenes:

"Las máscaras se crean agrupando dos objetos en un grupo de máscara El objeto superior (la máscara) se utiliza para crear un efecto de recorte sobre el objeto inferior. Puede utilizar tanto una imagen como un objeto con trazados como objeto superior de la máscara" (del manual oficial de Macromedia).


En este caso tenemos los dos objetos a utilizar: una elipse, que actuará de máscara, y la foto o imagen que queremos enmascarar.

Tomemos la precaución de que la máscara (en este caso, la elipse) esté por sobre el objeto a enmascarar.

Luego, aplicamos -Modificar (Modify)> -Máscara (Mask)> -Agrupar como máscara (Group as Mask).
En este caso, no importa el color de la imagen que vaya a actuar de máscara (aquí es la elipse negra), porque se encuentra SOBRE la imagen a enmascarar, pero nótese qué es lo que pasa cuando esta misma elipse se halla POR DEBAJO del objeto:
En este caso, como la máscara era negra, la figura tomó toda la escala de grises del color que tenía debajo De ahí podemos concluir que, cuando la máscara se halla por debajo del objeto, este adoptará la gama de colores que le defina la máscara.
En la foto de la derecha, la máscara era color bordó.

Gifts animados:

"Una animación GIF está formada por una serie de imágenes fijas que aparecen de forma consecutiva a gran velocidad, lo que permite percibirlas como una imagen en movimiento. Al crear una animación en Fireworks, cada imagen se sitúa en un fotograma distinto. A continuación, todas las imágenes de una animación se exportan en un archivo GIF animado. En Fireworks es posible abrir y editar animaciones GIF existentes o crear otras nuevas". (Manual oficial de Macromedia)

Esto implica que para crear un GIF animado debemos tener, en primera instancia, esa "serie de imágenes fijas" que lo conformarán, ya sean diseñadas por nosotros o provistas por otros medios.
Primeramente vamos a ver un ejemplo con una imagen importada. En este caso, importamos un gif animado.

Al importar el gif, nos aparecerá la siguiente ventana. En ella se nos pregunta si queremos que se agreguen los Fotogramas (frames) necesarios para conservar la animación. Es decir, cada frame contendrá una de las imágenes de la animación.
Obviamente, en este caso, le responderemos OK.

Bien, aquí tenemos ya el gif en el lienzo, y al lado se ve la ventana de frames. Acuérdense que cada frame es una imagen.

Si viésemos todos los frames al mismo tiempo se vería algo como lo de la imagen inferior.


Bien, pero, para qué importamos un gif animado a Fireworks, si pensamos volver a exportarlo como gif animado? Pues para optimizarlo. Las opciones son pocas, pero las hay. Por ahora, en este nivel de aprendizaje, conviene que tengamos en claro que, una vez definido como Gif Animado (tal como se marca en la imagen), el otro parámetro de optimización que nos queda es la cantidad de colores.
Finalmente, para probar el producto final, hacemos clic en el botón Play, abajo a la izquierda, en la ventana del documento. Y allí veremos la animación en curso. Y ahora ... sólo basta pedirle tres deseos ...

En un segundo ejemplo vamos a ver cómo crear un gif animado desde cero, y lo haremos elaborando algo muy utilizado en las páginas web: un banner publicitario, pero uno discreto, de 240x50. Recordemos, que los gifs animados son secuencias de imágenes, por tanto, para empezar desde cero, debemos crear esas imágenes.

Creamos entonces la primera imagen: la idea de la animación es que la línea punteada 1 corra hacia la derecha, y la 2 hacia la izquierda, mientras que el texto pasa de izquierda a derecha. Fijémonos que TODO está en un sólo frame, así que, con la herramienta "Duplicar fotograma", que está marcada como 3, creamos un fotograma nuevo.
En el segundo fotograma pegamos exactamente los mismos elementos, en la misma posición (con Copiar y Pegar), y luego movemos cada uno de ellos al lugar que le correspondería en el segundo cuadro de animación. Y así sucesivamente hasta completar toda la animación.
Finalmente tenemos todos los fotogramas correspondientes a cada instancia de la animación, y hemos ido moviendo, fotograma por fotograma, cada uno de los elementos.
Nótese que en los últimos fotogramas duplicamos el texto y lo hicimos aparecer por la izquierda para crear la ilusión que aparecía por ese lado a medida que desaparecía por la derecha. El paso siguiente es, en la herramienta marcada en rojo, poner cuántas veces se repetirá la animación, si no se repetirá nunca, o como está configurado en este caso: "forever", o sea, la repetición o "loop", será continuo.
A continuación se optimiza como gif animado del modo habitual,se exporta, y aquí tenemos el resultado final:

Con respecto a los efectos que podemos aplicar a los GIF's animados, sólo resta señalar dos cosas:
1- Los efectos referidos a sombras y texturas, son los mismos aplicables a cualquier imagen.
2- Los que están referidos al movimientos de las imágenes habrá que determinarlos por medio de una conveniente distribución en los distintos frames.

Con respecto a la optimización y exportación de un GIF animado:
1- Para la optimización de las imágenes que componen la animación, deben tenerse seleccionados todos los frames.
2- La exportación es exactamente igual que en un GIF no animado, sólo que en el mismo proceso de optimización hay que especificar que la exportación será como GIF animado.

Creación y organización de capas:

"Las capas dividen los documentos de Fireworks en planos discretos, como los elementos de una ilustración que se dibujan en distintas hojas superpuestas transparentes.
Cada objeto de un documento reside en una capa. Puede crear todas las capas antes de comenzar a dibujar o ir añadiéndolas cuando sea necesario. También puede reorganizar el orden de apilamiento de las capas o de los objetos de una sola capa".(Manual Oficial de Macromedia)

La ventana que nos permite trabajar con las capas (layers), la podemos visualizar desde el menú Ventana(Window)>Capas(Layers).
Por defecto, el lienzo nos aparece con dos capas: la capa web, en donde posteriormente ubicaremos los objetos de zona interactiva; y la capa 1.
Los objetos que Ud. vaya dibujando, aparecerán por defecto en la capa 1, pero Ud. tiene la posibilidad de agregar más capas mediante el botón Agregar capas.
El hecho de trabajar en capas le dará la posibilidad de trabajar con diversos efectos.

En un documento recién abierto, inserte una foto. Esta aparecerá en una capa independiente de la capa 1. Posiciónese en la capa 1 haciendo clic sobre ella y dibuje una figura geométrica cualquiera (recuerde que estamos probando), y luego colóquela sobre la figura
.
En el menú desplegable que se muestra en la imagen, se pueden encontrar los efectos disponibles para trabajar en capas, pero no olvidemos que esto dependerá del color de la figura que usemos en la capa que actuará de máscara.
Si hacemos clic en el ojo correspondiente a cada imagen, veremos que esta se o culta o se muestra, según se oculte o aparezca el ojo. Y la presencia del lápiz junto a alguna imagen, nos indicará que se está trabajando o que se tiene seleccionada esa imagen.

Historial del documento:

"El panel Historial permite ver, cambiar y repetir el historial del documento. En este panel se enumeran las acciones más recientes que se han realizado en Fireworks, conforme al número especificado en Pasos de deshacer". (Manual de Macromedia)

O sea que con el historial podemos:
1- Deshacer y rehacer comandos frecuentes.
2- Seleccionar un número determinado de comandos realizados para repetirlos.
3- Seleccionar y guardar un grupo de comandos recientemente realizados, para guardarlo como un solo comando.

Abra la ventana del historial con el menú Ventana(Window)> Historial(History). Ahí podrá ver las acciones que ha ido realizando, desde la primera a la última, de arriba hacia abajo.
Si selecciona una de las acciones y luego presiona el botón Volver a reproducir (Replay), obviamente repetirá esa acción.
Si selecciona una o más acciones y luego presiona el botón Guardar como comando, aparecerá una ventana en donde le pedirá el nombre para el nuevo comando. Posteriormente, cuando vuelva a necesitar esa acción o conjunto de acciones, las encontrará agrupadas en un solo comando dentro del menú Comando.

Búsqueda y reemplazo:

Nos falta hacer referencia ahora a la ventana de búsqueda y reemplazo, similar en tareas a las que encontramos en los procesadores de texto. La ventaja consiste en que podemos hacerlo con otros elementos, además de texto:
"Utilice Buscar y reemplazar para buscar y reemplazar elementos, como texto, valores URL, fuentes y color, en un documento. Con Buscar y reemplazar se puede buscar en el documento actual o en varios archivos a la vez. Durante el uso de Buscar y reemplazar, Fireworks puede efectuar un seguimiento y guardar un registro de cambios en el panel Historial del proyecto. Buscar y reemplazar sólo funciona con archivos PNG de Fireworks o con archivos que
contienen objetos vectoriales, como archivos FreeHand, CorelDRAW e Illustrator"
. (Manual de Macromedia)
La ventana de Búsqueda y reemplazo aparece desde el menú Ventana(Window)>Buscar y reemplazar(Find and replace).